import Taro from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import "./collect-detail.less";
import Api from "../../api/api";
import dayjs from "dayjs";
import Note from "../../commponents/note/note";
import Loadmore from "../../commponents/load-more/load-more";
import NavBar from "../../commponents/nav-bar/nav-bar";

export default class CollectDetail extends Taro.Component {
  constructor(props) {
    super(props);
    this.state = {
      docList: [],
      loadingMore: "",
      subjectId: null
    };
  }

  async onReachBottom() {
    if (this.state.loadingMore === "noMore") {
      return;
    }
    this.setState({ loadingMore: "loading" });
    let docs = await this.subjectArticles(
      this.state.subjectId,
      this.state.pageNo + 1
    );
    let docList = this.state.docList;
    docs.forEach(v => {
      docList.push(v);
    });

    this.setState({
      docList: docList
    });
  }

  async subjectArticles(subjectId, pageNo) {
    let d = await Api.subjectArticles(subjectId, pageNo, 20);
    let res = d.data.data;
    let list = res.list;
    list.forEach(v => {
      v.createdAt = dayjs(v.created_at).format("YYYY-MM-DD HH:mm");
    });
    this.setState({ pageNo: pageNo, loadingMore: res.hasNext ? "" : "noMore" });

    return list;
  }

  config = {
  };

  async componentWillMount() {
    const params = this.$router.params;
    const docList = await this.subjectArticles(params.subjectId, 1);
    this.setState({
      docList: docList,
      subjectId: params.subjectId
    });
  }
  render() {
    return (
      <View>
        <NavBar title="收藏夹"/>
      <View class="container">
        <View class="note-list">
          {this.state.docList.map((item, index) => {
            return <Note note={item} from="1" key={index} />;
          })}
        </View>
        <Loadmore loadingMore={this.state.loadingMore} />
      </View>
      </View>
    );
  }
}
